	<template>
	<div class="index">
		<el-row>
			<el-col class="index-head" :span="24">
				<div class="index-head-left">员工信息维护</div>
				<div class="student-select">
					<el-form :model="search" label-width="80px">
						<el-form-item class="select-ipt" label="员工姓名">
							<el-input v-model="search.ename"></el-input>
						</el-form-item>
						<el-form-item class="select-ipt" label="身份证号">
							<el-input v-model="search.idCard"></el-input>
						</el-form-item>
					</el-form>
					<el-button type="danger" round class="add-btn" @click="handleAdd">新增</el-button>
					<el-button type="danger" round class="select-btn" @click="expData">导出</el-button>
					<el-button type="danger" round class="select-btn" @click="impData">导入</el-button>
					<el-button type="danger" round class="select-btn" @click="loadData">查询</el-button>
				</div>
			</el-col>
			<el-col :span="24">
				<el-table class="table" height="576px"  :data="tableData" style="width: 100%;text-align: center">
					<el-table-column prop="ename" label="员工姓名"></el-table-column>
					<el-table-column prop="idCard" label="身份证号"></el-table-column>
					<el-table-column prop="entryDate" label="入职时间"></el-table-column>
					<el-table-column prop="createPerson" label="创建人"></el-table-column>
					<el-table-column prop="createDate" label="创建时间"></el-table-column>
					<el-table-column label="操作" width="180">
						<template slot-scope="scope">
							<el-button class="option-btn" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button class="option-btn" size="mini" @click="handleDelete(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="24" class="my-pagination">
				<el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange">
				</el-pagination>
			</el-col>
		</el-row>
		<!-- 新增修改部分-->
		<layerEdit v-model="layerEdit.isShow" :title="layerEdit.title" @onSubmit="onSubmit">
			<el-form :rules="rules" ref="form" :model="form" label-width="120px">
				<el-form-item label="员工姓名：" prop="ename">
					<el-input v-model="form.ename"></el-input>
				</el-form-item>
				<el-form-item label="身份证号码：" prop="idCard">
					<el-input v-model="form.idCard"></el-input>
				</el-form-item>
				<el-form-item label="入职时间：" prop="entryDate">
					<el-date-picker v-model="form.entryDate" :picker-options="pickerOptions1" type="date" placeholder="输入入职时间..." value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
			</el-form>
		</layerEdit>
		<layerEdit v-model="layerEdit.Show" title="导入" @onSubmit="submitUpload">
			<el-form>
				<el-upload
					class="upload-demo myupload"
					ref="upload"
					:action="fileuploadurl"
					:with-credentials="true"
					:on-change="handleChange"
					name="uploadFile"
					:on-remove="handleRemove"
					:before-remove="beforeRemove"
					:on-success="onSuccess"
					:auto-upload="false"
					:limit="1"
					:on-exceed="handleExceed">
					<el-button size="small" type="primary">选择文件</el-button>
					<el-input placeholder="请选择文件" v-model="fileName"></el-input>
				</el-upload>
				<el-button style="margin-top: 10px;" size="small" type="success" @click="dowloadXls">模版下载</el-button>
			</el-form>
		</layerEdit>
	</div>
</template>

<script>
import layerEdit from "@/components/layer-edit";

export default {
  name: "employee",
  components: {
    layerEdit
  },
  mounted() {
    this.loadData();
  },
  data() {
    let validateIdCard = (rule, value, callback) => {
      if (this.form.ebh) {
        // 有编号，更新验证
        this.$http.get(
          "iem/queryIdCard/" + this.form.ebh,
          {
            idCard: this.form.idCard
          },
          d => {
            if (d) {
              callback();
            } else {
              callback(new Error("身份证号码已经存在"));
            }
          }
        );
      } else {
        this.$http.get(
          "iem/queryIdCard",
          {
            idCard: this.form.idCard
          },
          d => {
            if (d) {
              callback();
            } else {
              callback(new Error("身份证号码已经存在"));
            }
          }
        );
      }
    };
    return {
      fileName: "",// 上传文件名
      fileuploadurl: process.env.API_BASH_URL+'iem/importXls',
      search: {
        ename: "",
        idCard: ""
      },
      total: 1, //分页数据总条数
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      layerEdit: {
        title: "",
        isShow: false,
        Show: false
      },
      form: {
        ebh: "",
        ename: "",
        idCard: "",
        entryDate: ""
      },
      rules: {
        ename: [
          {
            required: true,
            message: "请输入员工姓名",
            trigger: "blur"
          },
          {
            max: 50,
            message: "最大长度 50 个字符",
            trigger: "blur"
          }
        ],
        idCard: [
          {
            required: true,
            message: "请输入身份证号码",
            trigger: "blur"
          },
          {
            Length: 18,
            message: "身份证号码必须是18位以内",
            trigger: "blur"
          },
          {
            validator: validateIdCard,
            trigger: "blur"
          }
        ],
        entryDate: [
          {
            required: true,
            message: "请选择入职时间",
            trigger: "blur"
          }
        ]
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  methods: {
	//   上传
	handleChange(file){
		this.fileName = file.name;
	},
    submitUpload() {
      this.$refs.upload.submit();
    },
    dowloadXls(){
    	window.location.href = process.env.API_BASH_URL + "iem/dowloadXls";
    },
    handleRemove(file, fileList) {
      // 文件列表移除文件时的钩子
      console.log(file, fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onSuccess(d, file, fileList){
    	if (d.status == "1") {
    		this.layerEdit.Show = false;
    		layer.msg(d.msg);
    		this.fileName = ""
    	} else{
    		layer.msg(d.msg);
    	}
    },
    // 加载数据
    loadData() {
      this.$http.post(
        "iem/employee",
        $.extend(
          {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            _method: "PATCH"
          },
          this.search
        ),
        d => {
          if (d.status == "1") {
            this.tableData = d.rows;
            this.total = d.total;
          } else {
            this.tableData = [];
            this.total = 0;
          }
        }
      );
    },
    // 切页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    },
    // 新增操作
    handleAdd() {
      this.$data.form = this.$options.data().form;
      this.$refs.form.resetFields();
      this.layerEdit.title = "新增";
      this.layerEdit.isShow = true;
    },
    // 修改操作
    handleEdit(index, row) {
      $.extend(this.form, row);
      this.layerEdit.title = "修改";
      this.layerEdit.isShow = true;
    },
    // 删除操作
    handleDelete(row) {
      let that = this;
      layer.confirm(
        "确认删除？",
        {
          icon: 3,
          title: "提示"
        },
        function(index) {
          that.$http.post(
            "iem/employee/" + row.ebh,
            {
              _method: "DELETE"
            },
            d => {
              if (d.status == "1") {
                layer.close(index);
                that.loadData();
                layer.msg(d.msg);
              } else {
                layer.msg(d.msg, {
                  shift: 6
                });
              }
            }
          );
        }
      );
    },
    // 提交表单操作
    onSubmit() {
//    console.info(JSON.parse(JSON.stringify(this.form)));
      this.$refs.form.validate(valid => {
        if (valid) {
          //验证通过执行
          if (this.form.ebh) {
            this.form._method = "PUT";
            this.$http.post("iem/employee", this.form, d => {
              if (d.status == "1") {
                layer.msg(d.msg);
                this.loadData();
                this.layerEdit.isShow = false;
              } else {
                layer.msg(d.msg, {
                  shift: 6
                });
              }
            });
          } else {
            this.$http.post("iem/employee", this.form, d => {
              if (d.status == "1") {
                layer.msg(d.msg);
                this.loadData();
                this.layerEdit.isShow = false;
              } else {
                layer.msg(d.msg, {
                  shift: 6
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    expData() {
      window.location.href = process.env.API_BASH_URL + "iem/exportXls";
    },
    impData() {
      this.layerEdit.Show = true;
    }
  }
};
</script>

<style scoped>
.el-upload {
  float: right;
}
.el-table .cell,
.el-table th div {
  overflow: auto !important;
}

.el-switch {
  top: 0;
  left: 0;
}

.option-btn {
  background: #f9f9f9 !important;
}

.table {
  border: 1px solid #e1e1e1;
  border-bottom: 0;
  margin-top: 15px;
}

.select-ipt {
  width: 25%;
  float: left;
  margin-right: 5%;
  margin-bottom: 0 !important;
}

.student-select {
  padding: 30px 3%;
}

.select-btn {
  height: 40px;
  padding: 0 33px;
  margin-right: 20px;
  float: right;
  background: url("../../static/img/hui-btnBG.png");
  background-size: 100% 100%;
  border: 0;
  color: #000;
}

.add-btn {
  height: 40px;
  padding: 0 33px;
  float: right;
  background: url("../../static/img/nav-bg.png");
  background-size: 100% 100%;
  border: 0;
}
</style>